<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
    <link rel="stylesheet" href="/common/cropper/cropper.css" media="all">
    <title>Title</title>
</head>
<body>
<h1>11111111</h1>
<div style="width: 60%;height: 200px; float: left;">
    <div class="layui-inline" style="margin: 20px auto;text-align: center;display: block;">
        <img id="avatar" src="/file/headImg/default.png" class="layui-circle" style="width: 455px;height: 300px;">
    </div>
</div>
<!--<div style="width: 30%;height: 300px; float: right;">-->
<!--    <div style="margin: 20px auto;text-align: center;display: block;">-->
<!--        <div class="img-preview" style="width: 128px;height: 128px;"></div>-->
<!--    </div>-->
<!--</div>-->
</body>
<script type="text/javascript" src="/common/layui/layui.js"></script>
<script type="text/javascript" src="/common/cropper/cropper.js"></script>
<script src="/editor/js/jquery.min.js"></script>
<script type="text/javascript" src="/common/layer/layer.js"></script>
<script>
var cropper;
var croppable = false;
$(window).on('load', function () {
    var image = document.getElementById('avatar');
    var cropper = new Cropper(image, {
        aspectRatio: 1,
        viewMode: 1,
        autoCropArea: 0.9,
        preview: '.img-preview',
        ready: function () {
            croppable = true;
        }
    })
})

</script>
</html>